<!-- src/components/TaskEditDialog.vue -->
<template>
  <a-modal
    :visible="visible"
    title="任务管理"
    width="1200px"
    @cancel="onCancel"
    @ok="onOk"
  >
    <!-- 底部按钮区 -->
    <template #footer>
      <a-space style="float: right">
        <a-button @click="onReset">重置表单</a-button>
        <a-button @click="onCancel">取消</a-button>
        <a-button type="primary" @click="onOk">保存</a-button>
      </a-space>
    </template>

    <!-- 表单内容 -->
    <a-form ref="formRef" :model="localForm" layout="vertical" class="manage-form" :rules="rules">
      <!-- 在这里复制 DateDetails.vue 中所有 <a-form-item> 部分 -->
      <a-form-item label="日期" name="date">
        <a-date-picker v-model:value="localForm.date" format="YYYY-MM-DD" />
      </a-form-item>
      <a-form-item label="项目名称">
        <a-select v-model:value="localForm.projectName" :options="projectOptions" />
      </a-form-item>
      <a-form-item label="任务名称">
        <a-input v-model:value="localForm.taskName" />
      </a-form-item>
      <a-row :gutter="16">
        <a-col :span="6">
          <a-form-item label="项目经理">
            <a-select
              v-model:value="localForm.projectManager"
              :options="userOptions"
            />
          </a-form-item>
        </a-col>
        <a-col :span="18">
          <a-form-item label="普通成员">
            <a-select
              v-model:value="localForm.members"
              mode="multiple"
              :options="userOptions"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="预计开始时间">
            <a-date-picker
              v-model:value="localForm.estimatedStartTime"
              show-time
              format="YYYY-MM-DD HH:mm"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="预计结束时间">
            <a-date-picker
              v-model:value="localForm.estimatedEndTime"
              show-time
              format="YYYY-MM-DD HH:mm"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="实际开始时间">
            <a-date-picker
              v-model:value="localForm.actualStartTime"
              show-time
              format="YYYY-MM-DD HH:mm"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="实际结束时间">
            <a-date-picker
              v-model:value="localForm.actualEndTime"
              show-time
              format="YYYY-MM-DD HH:mm"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item label="主要内容">
        <a-textarea v-model:value="localForm.content" />
      </a-form-item>
      <a-form-item label="任务状态">
        <a-select v-model:value="localForm.type">
          <a-select-option value="正常">正常</a-select-option>
          <a-select-option value="中断">中断</a-select-option>
          <a-select-option value="异常">异常</a-select-option>
        </a-select>
      </a-form-item>
      <a-row v-if="localForm.type === '异常'" class="detail-row">
        <a-col :span="4" class="detail-label">异常原因</a-col>
        <a-col :span="20" class="detail-value">
          <a-input v-model:value="localForm.failureReason" placeholder="请输入异常原因" />
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import dayjs, { Dayjs } from 'dayjs'
import type { TodoItem } from '@/stores/todo'
import { message } from 'ant-design-vue';



const props = defineProps<{
  visible: boolean
  task: TodoItem | null
}>()

const emit = defineEmits<{
  (e: 'update:visible', v: boolean): void
  (e: 'save', item: TodoItem): void
}>()

const rules = {
  date:[{required:true,message:'请选择日期'}],
  // taskName:        [{ required: true, message: '请输入任务名称' }],
  // estimatedStartTime: [{ required: true, message: '请选择预计开始时间' }],
  // estimatedEndTime:   [{ required: true, message: '请选择预计结束时间' }],
  // 根据需求可继续加实际开始/结束时间的规则
}

// 本地表单状态
const formRef = ref()
const localForm = ref({
  id: undefined as number|undefined,
  date: null as Dayjs|null,
  projectName: '',
  taskName: '',
  projectManager: '',
  members: [] as string[],
  estimatedStartTime: null as Dayjs|null,
  estimatedEndTime: null as Dayjs|null,
  actualStartTime: null as Dayjs|null,
  actualEndTime: null as Dayjs|null,
  content: '',
  type: '' as TodoItem['type'],
  failureReason: ''
})

// 静态示例选项
// 用户选项（静态示例数据，可以替换为 API 获取）
const userOptions = [
  { label: '张三', value: 'zhangsan' },
  { label: '李四', value: 'lisi' },
  { label: '王五', value: 'wangwu' },
  { label: '赵六', value: 'zhaoliu' },
  { label: '小明', value: 'xiaoming' },
  { label: '小红', value: 'xiaohong' },
  { label: '小刚', value: 'xiaogang' },
  { label: '小丽', value: 'xiaoli' },
  { label: '小华', value: 'xiaohua' },
]
// 项目名称（静态示例数据，可以替换为 API 获取）
const projectOptions = [
  { label: '项目A', value: 'projectA' },
  { label: '项目B', value: 'projectB' },
  { label: '项目C', value: 'projectC' },
  { label: '项目D', value: 'projectD' },
  { label: '项目E', value: 'projectE' },
  { label: '项目F', value: 'projectF' },
  { label: '项目G', value: 'projectG' },
  { label: '项目H', value: 'projectH' },
  { label: '项目I', value: 'projectI' },
]

// 同步 props.task 到 localForm
function resetLocal() {
  if (props.task) {
    localForm.value = {
      id: props.task.id,
      date: dayjs(props.task.date),
      projectName:    props.task.projectName,
      taskName:       props.task.taskName,
      projectManager: props.task.projectManager,
      members:        [...props.task.members],
      estimatedStartTime: dayjs(props.task.estimatedStartTime),
      estimatedEndTime:   dayjs(props.task.estimatedEndTime),
      actualStartTime:    dayjs(props.task.actualStartTime),
      actualEndTime:      dayjs(props.task.actualEndTime),
      content:         props.task.content,
      type:            props.task.type,
      failureReason:   props.task.failureReason
    }
  } else {
    localForm.value = {
      id: undefined,
      date: null,
      projectName: '',
      taskName: '',
      projectManager: '',
      members: [],
      estimatedStartTime: null,
      estimatedEndTime: null,
      actualStartTime: null,
      actualEndTime: null,
      content: '',
      type: '',
      failureReason: ''
    }
  }
}
watch(() => props.task, () => {
  resetLocal()
})

// 取消
function onCancel() {
  emit('update:visible', false)
}

// 重置
function onReset() {
  resetLocal()
}

// 保存
async function onOk() {
  try {
    await formRef.value.validate()
  } catch {
    message.error('表单验证失败，请检查输入')
    return
  }
  const v = localForm.value
  const item: TodoItem = {
    id: v.id ?? Date.now(),
    date: v.date ? v.date.format('YYYY-MM-DD') : dayjs().format('YYYY-MM-DD'),
    projectName: v.projectName,
    taskName: v.taskName,
    participant: '', // 若需，可传入
    projectManager: v.projectManager,
    members: v.members,
    content: v.content,
    type: v.type,
    failureReason: v.failureReason,
    estimatedStartTime: v.estimatedStartTime!.format('YYYY-MM-DD HH:mm'),
    estimatedEndTime:   v.estimatedEndTime!.format('YYYY-MM-DD HH:mm'),
    actualStartTime:    v.actualStartTime!.format('YYYY-MM-DD HH:mm'),
    actualEndTime:      v.actualEndTime!.format('YYYY-MM-DD HH:mm'),
    conflictSign: false
  }
  emit('save', item)
  emit('update:visible', false)
}
</script>
